import React from 'react';
import { Alert, Empty, Skeleton } from 'antd';
import { defaultFormatResult, useRequest } from '@/hooks';
import {
    getContactDoc,
    saveContactInfo,
    saveEmployeeEmergencyData,
    saveEmployeeFamilyData
} from '@/pages/Organization/EmployeeManage/services';
import EmergencyContactSection from '@/pages/Organization/EmployeeManage/components/EmployeeInfoSections/EmergencyContactSection';
import FamilyMemberSection from '@/pages/Organization/EmployeeManage/components/EmployeeInfoSections/FamilyMemberSection';
import ContactsSection from '@/pages/Organization/EmployeeManage/components/EmployeeInfoSections/ContactsSection';
import authHelper from '@/utils/auth/helper';

/**
 * 员工详情 - 联系信息
 */
const ContactTabContent = ({ employeeCode, isPersonalPage, employeeInfoData }) => {
    // 获取数据
    const {
        data: employeeArchivesData,
        mutate: employeeArchivesInfoMutate,
        error: fetchEmployeeArchivesInfoError,
        loading: fetchEmployeeArchivesInfoLoading
    } = useRequest(() => getContactDoc({ employeeCode }), {
        cacheKey: `employee-contact-${employeeCode}`,
        refreshDeps: [employeeCode],
        ...defaultFormatResult
    });
    // 更新数据, 这个页面有多个部分, 每个部分数据单独在组件内部维护, 保存之后会触发父级组件刷新数据.
    const handleUpdateEmployeeData = changedData => {
        employeeArchivesInfoMutate(oldDta => ({ ...oldDta, ...changedData }));
    };

    // 错误处理
    if (fetchEmployeeArchivesInfoError || (!fetchEmployeeArchivesInfoLoading && !employeeArchivesData)) {
        return <Alert type="error" message={fetchEmployeeArchivesInfoError?.msg || '员工数据加载失败'} />;
    }

    return (
        <Skeleton loading={!employeeArchivesData || fetchEmployeeArchivesInfoLoading} active>
            {employeeArchivesData ? (
                <>
                    {/* 联系信息 */}
                    <div id="ContactsSection">
                        <ContactsSection
                            readonly={(!isPersonalPage && !authHelper.checkCode('office:orgs:employee:detail:updateBase')) || employeeInfoData?.serviceStatus === 6}
                            formData={employeeArchivesData}
                            onChange={handleUpdateEmployeeData}
                            saveAction={saveContactInfo}
                        />
                    </div>
                    {/* 紧急联系人 */}
                    <div id="EmergencyContact">
                        <EmergencyContactSection
                            readonly={(!isPersonalPage && !authHelper.checkCode('office:orgs:employee:detail:updateemergency')) || employeeInfoData?.serviceStatus === 6}
                            formData={employeeArchivesData}
                            onChange={handleUpdateEmployeeData}
                            saveAction={saveEmployeeEmergencyData}
                        />
                    </div>
                    {/* 家庭成员 */}
                    <div id="FamilyMember">
                        <FamilyMemberSection
                            readonly={(!isPersonalPage && !authHelper.checkCode('office:orgs:employee:detail:updateuserfamily')) || employeeInfoData?.serviceStatus === 6}
                            formData={employeeArchivesData}
                            onChange={familyList => handleUpdateEmployeeData({ familyList })}
                            saveAction={saveEmployeeFamilyData}
                        />
                    </div>
                </>
            ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            )}
        </Skeleton>
    );
};

export default ContactTabContent;
